
<template>
  <mu-paper :z-depth="1" class="lan-loadmore-body">
  <mu-appbar color="primary" class="lan-header">
    <mu-button icon slot="left" v-close>
      <i class="iconfont angle-left iconangle-left "></i>
      <span class="lan-header-back">返回</span>
    </mu-button>
    质量管理交底
  </mu-appbar>
  <mu-container ref="container" class="lan-loadmore-content no-padding">
    <div class="mode-box" style="margin-top:0;">
        <img src="../../assets/img/weather.jpg" style="width:100%;" />
    </div>
    <div class="mode-box">
        <div class="header-line">工作</div>
        <div class="header-body flex_b">
            <div class="body-box" v-push="'/meeting'">
                <div class="body-box-icon"></div>
                <div class="body-box-text">专项会议</div>
            </div>
            <div class="body-box">
                <div class="body-box-icon"></div>
                <div class="body-box-text">数字样板查询</div>
            </div>
            <div class="body-box">
                <div class="body-box-icon"></div>
                <div class="body-box-text">优秀做法展示</div>
            </div>
            <div class="body-box">
                <div class="body-box-icon"></div>
                <div class="body-box-text">典型案例共享</div>
            </div>
        </div>
        <div class="header-body flex_s" style="padding-top:10px;">
            <div class="body-box">
                <div class="body-box-icon"></div>
                <div class="body-box-text">项目质量策划</div>
            </div>
            <div class="body-box">
                <div class="body-box-icon"></div>
                <div class="body-box-text">国家政策法规</div>
            </div>

        </div>
    </div>
  </mu-container>
</mu-paper>
</template>

<script>
export default {
  name: 'MapShow',
  data () {
      return {
        num: 15,
        refreshing: false,
        loading: false,
        text: 'List'
      }
  },
  props: {
     
      pointCb:{
        type:Function,
        default:()=>{}
      },
    },
    created(){
      
    },
    methods:{
      loadTop(){
        // alert('顶部事件')
        setTimeout(() => {
          this.list = [1,2,3,4,5,7,8,9,10,11,12,13,14,15]
          this.$refs.loadmore.onTopLoaded();
        },2000)
      },
      loadBottom(){
        // alert('底部事件')
        // this.list.push(...[1,2,3,4,5])
        // setTimeout(() => {
          
          // this.list.push(...[1,2,3,4,5])
          // this.$refs.loadmore.onBottomLoaded();
          // this.allLoaded = true
        // },2000)
        // this.allLoaded = true;// 若数据已全部获取完毕
        
      },
      refresh () {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.text = this.text === 'List' ? 'Menu' : 'List';
          this.num = 10;
        }, 2000)
      },
      load () {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.num += 10;
        }, 2000)
      }
      
  }
}
</script>

<style lang="scss" scoped>
 .mode-box{
    width:100%;
    height:auto;
    margin:10px 0;
    background-color:#fff;
    box-sizing: border-box;
    padding:15px;
    .header-line{
        width:100%;
        height:20px;
        font-size:17px;
        line-height:23px;
        box-sizing: border-box;
        padding-left:5px;
        border-left:5px solid #0080cb;
    }
    .header-body{
        width:100%;
        overflow:auto;
        box-sizing: border-box;
        padding:15px 0 0 0;
        .body-box{
            height:0.8rem;
            width:0.8rem;
            border-radius: 4px;
            border:1px solid #E0E0E0;
            margin-left:calc(25% - 0.82rem);
            margin-right:calc(25% - 0.82rem);
            box-sizing: border-box;
            padding:5px;
            display: flex;
            flex-direction:column;
            .body-box-text{
                font-size:0.12rem;
                width:100%;
                height:20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center;
            }
            .body-box-icon{
                width:100%;
                flex:1;
                
            }
        }
    }
    .header-body>.body-box:last-child{
        margin-right:0;
    }
    .header-body>.body-box:first-child{
        margin-left:0;
    }
 }
</style>
